import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Col, message, Row, Modal } from 'antd';
import { WeaTable, WeaDialog, WeaLocaleProvider, WeaNewScroll, WeaInput, WeaInputSearch } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核成绩-发送提醒
 */
@inject("accessResultListStore")
@observer
export default class AccessResultSend extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            content: getLabel(510054, '您尚有绩效考核未完成打分，请及时提交，谢谢！'), //提醒内容
            columns: [
                {
                    title: <span>{getLabel(25034, '姓名')}</span>,
                    dataIndex: 'lastname', key: 'lastname', width: '40%',
                }, {
                    title: <span>{getLabel(33553, '分部')}</span>,
                    dataIndex: 'subcompanyname', key: 'subcompanyname', width: '30%',
                }, {
                    title: <span>{getLabel(27511, '部门')}</span>,
                    dataIndex: 'departmentname', key: 'departmentname', width: '30%',
                }
            ]
        };
        this.store = this.props.accessResultListStore;

    }

    render() {
        let { showsend, changeSend, getSendListData, onSendParamsChange, sendListloading, sendSelectedRowKeys, onSendListSelectChange, sendParams: { lastname, current, pageSize }, sendResult: { total, data } } = this.store;
        let { columns } = this.state;
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@w8k6iy`}
                icon='icon-coms-implement'
                iconBgcolor='rgb(150, 53, 138)'
                style={{ width: window.innerWidth * 0.7, height: window.innerHeight * 0.7 }}
                title={getLabel(510005, '发送提醒')}
                buttons={this.getButtons(this.props.ecId || '')}
                visible={showsend}
                onCancel={changeSend}
            >
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@77lhw0`} height={window.innerHeight * 0.7 - 20}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@opo5mr`} style={{ padding: '15px' }}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yz8unl`} span={16}>
                            <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@o082j9`}
                                value={lastname}
                                viewAttr={2}
                                placeholder={getLabel('507615', '请输入人员姓名/首字母')}
                                onSearch={(val) => {
                                    onSendParamsChange({ 'lastname': val });
                                    getSendListData();
                                }}
                                />
                        </Col>
                    </Row>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@v3hyu2`}
                        rowKey="id"
                        columns={columns}
                        dataSource={data}
                        bordered={true}
                        loading={sendListloading}
                        pagination={{
                            total: total,
                            showTotal: () => getLabel(509103, `共{total}条`).replace('{total}', total),
                            current: current,
                            showQuickJumper: true,
                            pageSize: pageSize,
                            showSizeChanger: true,
                        }}
                        rowSelection={{
                            selectedRowKeys: sendSelectedRowKeys,
                            onChange: onSendListSelectChange,
                        }}
                        onChange={this.handleTableChange}
                    />
                    <div style={{ padding: '0 20px', marginTop: '10px', display: 'flex', alignItems: 'center' }}>
                        <div style={{ width: 100 }}>{getLabel(27415, '提醒内容')}：</div>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@kymzcq`}
                            value={this.state.content}
                            onChange={content => {
                                this.setState({ content });
                            }}
                        />
                    </div>
                </WeaNewScroll>
            </WeaDialog>
        )
    }

    //获取按钮
    getButtons = (ecId) => {
        let { changeSend, sendSelectedRowKeys } = this.store;
        return [
            <Button ecId={`${ecId}_Button@4bby7z@remind`} type="primary" disabled={sendSelectedRowKeys.length == 0} onClick={() => this.remind()}>
                {getLabel(501480, '提醒')}
            </Button>,
            <Button ecId={`${ecId}_Button@f35kf2@cancel`} type="ghost" onClick={() => changeSend()}>
                {getLabel(31129, '取消')}
            </Button>
        ];
    }

    //表格改变
    handleTableChange = (pagination, filters, sorter) => {
        this.store.onSendParamsChange({
            current: pagination.current,
            pageSize: pagination.pageSize
        });
        this.store.getSendListData();
    };

    //发送提醒
    remind = () => {
        let { content } = this.state;
        if (content == "") {
            message.warning(getLabel(510053, '请输入需要提醒的内容'));
        } else {
            Modal.confirm({
                title: getLabel(386786, '信息确认'),
                content: getLabel(510052, '确认给选中人员发送消息提醒？'),
                onOk: () => {
                    this.store.remind(content);
                },
            });
        }
    }

};
